<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">

  <script src="https://cdn.jsdelivr.net/npm/zrender@4.3.0/dist/zrender.js"></script>
  <!-- <script src="./js/zrender.js"></script> -->

  <title></title>
</head>

<body>
  <div id="container" style="height: 550px;width: 960   px; "></div>
  <script>
    var zr = zrender.init(document.getElementById('container'));
    var ellipse = new zrender.Ellipse({
      shape: {
        cx: 700,
        cy: 350,
        rx:195,
        ry:170
     
      },
      style: {
        fill: 'white',
        stroke: 'black',//描边颜色，边框
        lineWidth:12,
      },
   //   z: 1, 层级

    });
    var circle = new zrender.Circle({
      shape: {
        cx: 845,
        cy: 195,
        r:60
     
      },
      style: {
        fill: 'black',
        stroke: 'black',//描边颜色，边框
        lineWidth:5,
      },
  //    z: 2, 层级

    });
    var circle2 = new zrender.Circle({
      shape: {
        cx: 565,
        cy: 195,
        r:60
     
      },
      style: {
        fill: 'black',
        stroke: 'black',//描边颜色，边框
        lineWidth:5,
      },
  //    z: 2, 层级

    });
    var arc = new zrender.Arc({
      shape: {
        cx: 700,
        cy: 400,
        r:50,
        startAngle:-35, //弧度
        clockwise:false, //旋转
     
      },
      style: {
    //    fill: 'blue',
        stroke: 'black',//描边颜色，边框
        lineWidth:10,
      },
    //  z: 1, 层级

    });
    var heart = new zrender.Heart({
      shape: {
        cx: 620 ,
        cy: 300 ,
        width:15,
        height:20
     
      },
      style: {
        fill: 'pink',
        stroke: 'pink',//描边颜色，边框
        lineWidth:2,
      },
  //    z: 2, 层级

    });
    var heart2 = new zrender.Heart({
      shape: {
        cx: 765 ,
        cy: 300 ,
        width:15,
        height:20
     
      },
      style: {
        fill: 'pink',
        stroke: 'pink',//描边颜色，边框
        lineWidth:2,
      },
  //    z: 2, 层级

    });
    var ellipse2 = new zrender.Ellipse({
      shape: {
        cx: 700,
        cy: 550 ,
        rx:235,
        ry:250
     
      },
      style: {
        fill: 'black',
        stroke: 'black',//描边颜色，边框
        lineWidth:12,
      },
   //   z: 1, 层级

    });

    zr.add(circle2)
    zr.add(circle)
    zr.add(ellipse2)
    zr.add(ellipse)
    zr.add(arc)
    zr.add(heart)
    zr.add(heart2)
  </script>
</body>

<ml>